<template>
  <div ref="myRef">
    <slot v-if="visible"></slot>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const myRef = ref();

const visible = ref(false);

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          visible.value = true;
          console.log('view');
          observer.unobserve(myRef.value);
        }
      });
    },
    { rootMargin: '50px', threshold: 0.01 }
  );

  observer.observe(myRef.value);
});
</script>
